<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="lib/vue.js"></script>
</head>
<body>
  <div id="root">
    <!-- 在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法
       (即 v-slot 指令)。
       它取代了 slot 和 slot-scope 这两个目前已被废弃但
       未被移除且仍在文档中的 attribute。 -->
    <my-layout>
      <!-- <header slot="header">首页标题</header>
      <div slot="default">首页内容</div>
      <footer slot="footer">首页底部</footer> -->

      <!-- 使用v-slot 需要template标签配合使用 -->
      <template v-slot:header>
        <header >首页标题</header>
      </template>
      <template v-slot:default>
        <div >首页内容</div>
      </template>
      <template v-slot:footer>
        <footer>首页底部</footer> 
      </template>
    </my-layout>
    <hr />
    <h4>废弃语法但是仍可用</h4>
    <my-layout>
      <header slot="header">分类标题</header>
      <div slot="default">分类内容</div>
      <footer slot="footer">分类底部</footer>
    </my-layout>
  </div>
</body>
<template id="layout">
  <div class="layout">
    <header class="header">
      <slot name="header">header</slot>
    </header>
    <div class="content">
      <slot name="default">main</slot>
    </div>
    <footer class="footer">
      <slot name="footer">footer</slot>
    </footer>
  </div>
</template>
<script>
  const myLayout = {
    template: '#layout',
  }
  new Vue({
    el: '#root',
    components: {
      myLayout
    }
  })
</script>
</html>